<script setup>
import { ref, watch } from "vue";
import { getSearchSuggestApi } from "@/apis/search";

const emits = defineEmits(['search'])
const props = defineProps(['keyWords']);

const searchSuggest = ref([]);

watch(
  () => props.keyWords,
  async () => {
    const data = await getSearchSuggestApi({
      keywords: props.keyWords,
      type: "mobile",
    });
    searchSuggest.value = data.result.allMatch;
  },
  { immediate: true }
);
</script>

<template>
  <view class="search-suggest">
    <view
      class="search-suggest-wrap"
      v-for="(item, index) in searchSuggest"
      :key="index"
      @tap="emits('search', item.keyword)"
    >
      {{ item.keyword }}
    </view>
  </view>
</template>

<style lang="scss">
.search-suggest {
  height: 100%;
  .search-suggest-wrap {
    line-height: 100rpx;
    border-bottom: 2rpx #eee solid;
  }
}
</style>
